<template>
  <div id="big_box">
    <van-form @submit="login">
      <van-cell-group inset>
        <van-field
          v-model="loginForm.username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="loginForm.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { Form, Field, CellGroup, Toast } from 'vant'
import axis from 'axios'
export default {
  components: {
    [Form.name]: Form,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Toast.name]: Toast,
  },
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
      },
    }
  },

  methods: {
    ...mapMutations(['changeLogin']),
    login() {
      let _this = this
      if (this.loginForm.username === '' || this.loginForm.password === '') {
        alert('账号或密码不能为空')
      } else {
        axis({
          method: 'post',
          url: '/apis/userLogin/',
          data: _this.loginForm,
        })
          .then((res) => {
            if (res.data.code == 200) {
              _this.userToken = 'JWT ' + res.data.data.token
              // 将用户token保存到vuex中
              _this.changeLogin({ Authorization: _this.userToken })
              // _this.changeLogin({ gameuser_pk: res.data.data.gameuser_pk })
              _this.$router.push('/')
              Toast(res.data.message)
            } else {
              Toast(res.data.message)
            }
          })
          .catch((error) => {
            Touch('未知错误')
            console.log(error)
          })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
#big_box {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
}
</style>
